<template>
  <div class="home_container">
    <div class="search_form">
      <form action="/">
        <van-search v-model="value" show-action placeholder="请输入想要查询的城市名" @search="onSearch" @cancel="onCancel" />
      </form>
      <Hotkey @cityName="getCityName"></Hotkey>

      <ul class="weather_list">
        <li v-for="(item, index) in weatherList" :key="index" class="day_box">
          <div class="info_type">
            <span class="iconfont">{{ item.type }}</span>
          </div>
          <div class="info_temp">
            <b> {{ item.low }} </b>
            ~
            <b> {{ item.high }} </b>
          </div>
          <div class="info_date">
            <span> {{ item.date }} </span>
          </div>
        </li>
      </ul>

      温馨提示：{{tips}}
    </div>
  </div>
</template>

<script>
import Hotkey from '@/components/Hotkey'

export default {
  name: 'Home',
  data () {
    return {
      value: '',
      weatherList: [],
      tips: ''
    }
  },
  mounted () {
    this.getCityName()

    this.onSearch()
  },
  methods: {
    async onSearch (val) {
      const { data: res } = await this.$api.getWeatherMessage(val)
      this.weatherList = res.data.forecast
      this.tips = res.data.ganmao
      // console.log(this.tips)
    },
    onCancel () {},
    getCityName (val) {
      this.value = val
      this.onSearch(val)
      // console.log('ok')
    }
  },
  components: {
    Hotkey
  }
}
</script>

<style>
.search_form {
  padding: 0.1rem;
}
.weather_list {
  width: 100%;
  text-align: center;
  margin-top: 0.3rem;
  /* border: 0.02rem solid red; */
}
.day_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0.5rem;
  padding: 0.005rem;
  margin: 0.04rem 0;
  background-image: -moz-linear-gradient(45deg, rgb(242, 189, 255), rgb(255, 247, 153));
  background-image: -webkit-linear-gradient(45deg, rgb(242, 189, 255), rgb(255, 247, 153));
  background-image: linear-gradient(45deg, rgb(242, 189, 255), rgb(255, 247, 153));
  border: 0.01rem solid black;
  border-radius: 0.05rem;
}
.iconfont{
  color: #778899;
  font-size: 0.2rem;
  /* margin-right: 0.2rem; */
}
.info_type{
  flex: 1;
}
.info_temp {
  flex: 2;
  font-size: 0.14rem;
  color: #fda252;
  /* margin-right: 0.08rem; */
}
.info_date {
  flex: 1;
}
</style>
